<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="../css/productDetailStyle.css">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="../css/indexStyle.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>商品详情</title>
</head>
<style>
    .comment{
        width: 80%;
        /*height: 500px;*/
        margin: 10px auto;
        border: 1px solid rgba(139,139,139,0.51);
        background-color: white;
        box-shadow: 0 20px 50px 0 rgba(68,68,68,0.1);
        display: flex;
        flex-direction: column;
    }
    .comment-1{
        width: 100%;
        height: 50px;
        background-color: rgba(173,173,173,0.33);
    }
    .comment-2{
        width: 100%;
        /*height: 250px;*/
        margin-left: -1px;
    }
    .comment-2-1{
        width: 97%;
        /*height: 94%;*/
        margin: 7px auto;
        border-radius: 10px;
        border: 1px solid rgba(158,158,158,0.33);
    }
    .comment-2-1-1{
        width: 97%;
        height: 50px;
        margin-left: 15px;
        border-radius: 10px;
    }
    .comment-3{
        width: 100%;
        height: 43px;
    }
    .comment-4{
        width: 100%;
        height: 110px;
    }
    .comment-4-1{
        width: 97%;
        height: 85%;
        border: 1.5px solid rgba(158,158,158,0.33);
        margin: 8px auto;
        border-radius: 10px;
    }
    .commenter{
        margin-left: 23px;
        font-size: 14px;
        font-family: 黑体;
    }

    .sub{
        width: 99%;
        height: 80px;
        margin-top: 4px;
        margin-left: 2px;
        border-radius: 5px;
        border: 0px;
    }
    .sub:focus{
        outline: none;
    }
    .sub-1{
        width: 60px;
        height: 30px;
        margin-left: 1040px;
        background-color: transparent;
        border: 0px;
        font-weight: bolder;
    }
    .sub-2{
        width: 60px;
        height: 30px;
        margin-top: 5px;
        margin-left: 10px;
        background-color: orangered;
        border: 0px;
        border-radius: 30px;
        font-weight: bold;
        color: white;
    }
    .lll{
        font-family: 微软雅黑;
        font-size: 15px;
        font-weight: bolder;
    }
    .llll{
        font-family: 宋体;
        font-size: 14px;
    }
</style>
<body>
<div>
    <!--    导航栏-->
    <div th:replace="~{header :: header}"></div>

    <!--商品详情-->
    <div class="productDetailBox">
        <div class="productDetail">
            <div class="productImage">
                <div class="bigImage">
                    <img th:attr="src=${goods.getGoodsImage()}">
                </div>
                <div class="smallImage"></div>
            </div>
            <form th:action="@{/cart/addCart}" method="post">
                <div class="productChoose">
                    <div class="productNameBox">
                        <h1 class="productNameStyle" th:text="${goods.getGoodsName()}"></h1>
                    </div>
                    <div class="productFeatureBox">
                        <a class="productFeatureStyle" th:text="${goods.getGoodsDetail()}"></a>
                    </div>
                    <div class="productPriceBox">
                        <div class="priceBox">
                            <p style="margin: 0">价格</p>&nbsp;&nbsp;
                            <span>
                                RMB <a th:text="${goods.getGoodsPrice()}"></a>
                            </span>
                        </div>
                    </div>
                    <div class="productSelectBox">
                        <div class="prosSpecificationBox">
                            <p>数量</p>
                            <div class="checkBox">
                                <input style="border: 0px" name="goodsId" type="hidden" th:value="${goods.getGoodsId()}">
                                <div class="checkDiv">
                                    <input class="checkStyle" id="goodsNumber" name="goodsNumber" type="number">
                                </div>
                            </div>
                        </div>
                        <div class="prosSpecificationBox">
                            <p style="margin-top: 10px;">库存</p>
                            <div class="checkBox-1">
                                <div class="checkDiv">
                                    <span class="checkStyle">
                                        <a th:text="${goods.getGoodsStock()}"></a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="productAddBox">
                        <div class="addCartBox" th:unless="${session.user==null}">
                            <button class="productAddStyle" type="submit"  value="加入购物车">
                                <i class="fa fa-cart-plus" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 添加评论 -->
    <div class="comment">
        <form th:action="@{/goods/addEvaluation}" method="post">
            <div >
                <div class="comment-1" th:unless="${session.user==null}">
                    <p class="commenter">评 论</p>
                </div>
                <input style="display: none" name="goodsId" th:value="${goods.getGoodsId()}">

                <div class="comment-3">
                    <p class="commenter">请 留 下 你 的 厥 词</p>
                </div>

                <div class="comment-4">
                    <div class="comment-4-1">
                        <input class="sub" name="evaluationContent" type="text">
                    </div>
                </div>

                <div>
                    <input class="sub-1" value="取 消">
                    <input class="sub-2" id="submitEvaluationContent" type="submit" value="确 定">
                </div>
            </div>
        </form>
        <div class="comment-2">
            <div class="comment-2-1" >
                <div class="comment-2-1-1" th:each="evaluationVO:${evaluationVOList}">
                    <span class="lll" th:text="${evaluationVO.getUser().getUsername()}">孙 弈 枫 ：</span>
                    <span class="llll" th:text="${evaluationVO.getEvaluationContent()}">这个很不错，值得推荐，哈哈哈哈哈~~~~</span>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="goodsId" th:value="${goods.getGoodsId()}">

</body>
<script src="../js/index.js"></script>
<script>
    function addCart() {
        let goodsNumber = document.getElementById("goodsNumber").nodeValue;
        let goodsId = document.getElementById("goodsId").nodeValue;
        let href = "/cart/addCart?goodsId=" + goodsId + "&goodsNumber=" + goodsNumber;
    }

</script>
</html>